<template>
  <div>
    <!-- 搜索活动信息的搜索栏 -->
    <el-input v-model="nameOrAccount" placeholder="请输入活动名称或活动举办人名" style="width: 60%;"></el-input>
    <el-button style="margin-left: 10px" type="primary" @click="getAllActivity()">搜索</el-button>
    <div>
      <el-table
          row-key="id"
          height="80vh"
          :data="activityMessage"
          border style="width: 100%"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}">

        <el-table-column prop="activityName" label="活动名称" width="400"/>
        <el-table-column prop="activityContent" label="活动内容" width="500"/>
        <el-table-column prop="activityTime" label="活动开始时间" width="180"/>
        <el-table-column prop="activityPerson" label="发起人员" width="120" />
        <el-table-column prop="studentNum" label="需要学生数量" width="120" />
        <el-table-column prop="enterStartTime" label="报名开始时间" width="120" />
        <el-table-column prop="enterEndTime" label="报名结束时间" width="120" />
        <el-table-column align="center" label="操作" prop="operate" width="300">
          <template v-slot="scope">
            <el-button
                icon="Edit"
                size="small" type="primary"
                @click="this.dialogVisible = true;lookOnSubmit(scope.row)"
            >查看详情
            </el-button>
            <el-button
                size="small"
                type="danger"
                icon="Delete"
                @click="deleteItem(scope.row)"
                v-if="this.isTeacher()"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="footer">
      <el-pagination
          small
          :pager-count="5"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[50, 100 , 200 , 500,1000,2000,5000]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
    <!--    查看详情弹窗-->
    <el-dialog
        v-model="dialogVisible"
        :close-on-click-modal="false"
        width="500px"
        height="700px"
        close-on-press-escape
        align-center
        draggable>
      <el-descriptions
          class="margin-top"
          title="查看详情"
          :column="1"
          border>
        <el-descriptions-item
        width="1px">
          <template #label>
            <div class="cell-item">
              活动名
            </div>
          </template>
          {{ this.activityDetial.activityName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              活动内容
            </div>
          </template>
          {{ this.activityDetial.activityContent }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              所需学生数
            </div>
          </template>
          {{ this.activityDetial.studentNum }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              开始时间
            </div>
          </template>
          {{ this.activityDetial.enterStartTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              结束时间
            </div>
          </template>
          {{ this.activityDetial.enterEndTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              活动时间
            </div>
          </template>
          {{ this.activityDetial.activityTime }}
        </el-descriptions-item>
      </el-descriptions>
      <el-form-item v-if="activity(this.roleNo)">
        <el-button type="primary" @click="this.getEnterData()">打印报名表</el-button>
      </el-form-item>
    </el-dialog>
  </div>
  <el-dialog
      v-model="detailedInformation"
      :close-on-click-modal="false"
      title="报名信息"
      width="850px">
    <Activity v-if="detailedInformation" ref="dialog"/>
  </el-dialog>
</template>

<script>
import request from "@/util/request.js";
import {activity} from "@/util/permissionJudgment.js";
import Information from "@/template/Information.vue";
import Activity from "@/template/Activity.vue";
import {ACTIVITY} from "@/util/config.js";
export default {
  components: {Activity},
  data() {
    return {
      enterData: [], // 报名表信息
      detailedInformation: false,// 报名表弹窗
      dialogVisible: false,// 查看详情弹窗显示
      activityDetial: {}, // 活动信息
      activity1:{
        activityName :"",
        activityContent:"",
        studentNum :"",
        enterStartTime:"",
        enterEndTime:"",
        activityTime :"",
      },
      activityMessage: [],
      nameOrAccount: "",
      pageNum: 1, //页码
      pageSize: 50,  //页长
      total: 0,  //总表长
      rules: {
        activityName: [
          {required: true, trigger: 'blur', message: "活动名称不能为空"}
        ],
        activityContent: [
          {required: true, trigger: 'blur', message: "活动内容不能为空"}
        ],
        studentNum: [
          {required: true, trigger: 'blur', message: "需要学生数量不能为空"}
        ],
        enterStartTime: [
          {required: true, trigger: 'blur', message: "报名开始时间不能为空"}
        ],
        enterEndTime: [
          {required: true, trigger: 'blur', message: "报名结束时间不能为空"}
        ],
        activityTime: [
          {required: true, trigger: 'blur', message: "活动开始时间不能为空"}
        ],
      },
      roleNo: [],
      activityState:"",  // 活动状态
    };
  },
  //初始化加载
  created() {
    this.setRoleNo()
    this.getAllActivity()
  },
  mounted() {

  },
  methods: {
    activity,
    isTeacher() {
      for (let item of this.roleNo) {
        if (ACTIVITY.includes(item)) {
          return true
        }
      }
      return false
    },
    getEnterData() {
      request.get("/info_activity_massage/getOneActivityStudentMassage?activityNo=" + this.activityDetial.activityNo).then(res => {
        this.detailedInformation = true
        this.enterData = res.data
        window.getTemplateData = (callback) => {
          this.getTemplateData(callback);
        }
      })
    },
    getTemplateData(callback) {
      callback(this.enterData);
    }, //获取文书数据
    // 用户角色赋值
    setRoleNo() {
      let role = JSON.parse(localStorage.getItem("user"))["roleNo"]
      if (role.includes(",")) {
        this.roleNo = role.split(',')
      } else {
        this.roleNo.push(role)
      }
    },
    renderHeader(h, {column}) {
      // 隐藏表头内容
      column.realLabel = column.label;
      column.label = '';
      // 返回一个自定义的表头单元格
      return h('el-table-column', {props: {width: '50'}}, column.realLabel);
    },
      deleteItem(scope) {
          // 获取要删除的通知的 ID
          const id = scope.id;
          this.$confirm('此操作将永久删除该通知, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              // 确认删除，向服务器发送请求
              request.get(`/info_activity/delete/${id}`)
                  .then(() => {
                      // 删除成功，重新获取数据
                      this. getAllActivity();
                      this.$message({
                          type: 'success',
                          message: '删除成功!'
                      });
                  })
          }).catch(() => {
              this.$message({
                  type: 'info',
                  message: '已取消删除'
              });
          });
      },
    // 获取所有结束活动
    getAllActivity(){
      request.get("/info_activity/pageOver?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&activityName=" + this.nameOrAccount + "&activityPerson=" + this.nameOrAccount).then(res => {
        if (res.data.code === '200') {
          for (let key in res.data.data) {
            if (key === "records") {
              this.activityMessage = res.data.data[key];
            } else if (key === "total") {
              this.total = res.data.data[key];
            }
          }
        }
      })
    },
    //表尾分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllNoticeType();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getAllNoticeType();
    },
    // 回显
    lookOnSubmit(scope) {
      this.activityDetial = [];
      this.activityDetial = scope
    },
  }
};

</script>


<style scoped>
</style>
